<template>
  <div style="margin-right: 10px">
    <el-card style="margin-bottom: 16px">
      <div slot="header" style="display: flex; justify-content: space-between">
        <span><i class="el-icon-collection"></i>
          {{ query.salesGrade ? query.salesGrade : query.proBrandList + " " }}销售Top同期单品-本年{{ dataYear.dataYear }}</span>
        <span>
          产品组合：
          <el-select v-model="topNumber" placeholder="top款" style="width: 100px; height: 30px; margin-left: 5px"
            @change="changeView">
            <el-option v-for="dict in topNumberList" :key="dict.value" :label="dict.label" :value="dict.value" />
          </el-select>
          <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExportI">导出</el-button>
        </span>
        <!-- <span
                      ><i class="el-icon-collection"></i>
                      {{ query.salesGrade? query.salesGrade: query.proBrandList + " " }}年度完成率</span
                    > -->
      </div>
      <tableDataIX :tableDataList="tableDataI" @getsaleComprehensiveStatistics="getsaleComprehensiveStatistics" />
      <pagination v-show="totalI > 0" :limit.sync="pageReqI.thisPageSize" :page.sync="pageReqI.pageNum" :total="totalI"
        @pagination="getselectSaleSynchronousItem"></pagination>
    </el-card>

    <el-card style="margin-bottom: 16px">
      <div slot="header" style="display: flex; justify-content: space-between">
        <span><i class="el-icon-collection"></i>
          {{ query.salesGrade ? query.salesGrade : query.proBrandList + " " }}销售Top同期单品-上一年{{ dataYear.lastdataYear
          }}</span>
        <span>
          <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExportII">导出</el-button>
        </span>
      </div>
      <tableDataX :tableDataList="tableDataII" @getsaleComprehensiveStatistics="getsaleComprehensiveStatistics" />
      <pagination v-show="totalII > 0" :limit.sync="pageReqII.thisPageSize" :page.sync="pageReqII.pageNum"
        :total="totalII" @pagination="getselectSaleSynchronousItemLastYear"></pagination>
    </el-card>
    <el-card style="margin-bottom: 16px">
      <div slot="header">{{ query.salesGrade ? query.salesGrade : query.proBrandList + " " }} 销售类目综合对比分析{{ dataYear.dataYear
      }}</div>
      <tableList :tableDataList="saleComprehensiveAnalysisList"
        @getsaleComprehensiveStatistics="getsaleComprehensiveStatistics" />
    </el-card>
    <el-row :gutter="20">
      <el-col :span="12" :xs="24">
        <el-card style="margin-bottom: 16px; height: 483px">
          <div slot="header" style="display: flex; justify-content: space-between">
            <span> 销售额占比 </span>
            <span>
              <span style="margin-right: 10px;">{{ yearLabel == '本年' ? dataYear.dataYear : dataYear.lastdataYear }}</span>
              <el-radio-group v-model="yearLabel" size="small" @change="getselectSaleAmountRatio">
                <el-radio-button v-for="(item, index) in typeArr" :key="index" :label="item.value">{{ item.label
                }}</el-radio-button>
              </el-radio-group>
            </span>
          </div>
          <PieChartI :chartData="PieChartData" id="PieChartData" />
        </el-card>
      </el-col>
      <el-col :span="12" :xs="24">
        <el-card style="margin-bottom: 16px">
          <div slot="header">
            {{ item ? item + "-" : "" }}销售额 VS 销售件数(销售额单位：万)
          </div>
          <barLine :echartDataSku="IChart" />
        </el-card>
      </el-col>
      <el-col :span="12" :xs="24">
        <el-card style="margin-bottom: 16px">
          <div slot="header">{{ item ? item + "-" : "" }}折扣 VS 退货</div>
          <barLineI :echartDataSku="IIChart" />
        </el-card>
      </el-col>
      <el-col :span="12" :xs="24">
        <!-- <tableList :tableDataList="categoryNewCountYoyList"
        /> -->
        <el-card style="margin-bottom: 16px">
          <div slot="header"> {{ item ? item + "-" : "" }}访客 vs 转化</div>
          <ve-histogram :data="IIIChart" :settings="chartSettingscompleteRate" style="width: 100%; height: 100%"
            :extend="chartExtend"></ve-histogram>
        </el-card>
      </el-col>
    </el-row>
    <!-- <el-card style="margin-bottom: 16px">
      <div slot="header">
        产品上新分析
       
      </div>
      <barLine :echartDataSku="barLineChart" />
      <tableList :tableDataList="barLineData" />
    </el-card>
    <el-card style="margin-bottom: 16px">
      <div slot="header">
        产品品类上新分析
        
      </div>
      <el-row :gutter="20">
        <el-col :span="16" :xs="24"
          ><barLine :echartDataSku="saleComprehensiveAnalysisChart" />
        </el-col>
        <el-col :span="8" :xs="24">
          <tableList :tableDataList="saleComprehensiveAnalysisList"
        /></el-col>
      </el-row>
    </el-card>
    <el-card style="margin-bottom: 16px">
      <div slot="header">
        新品层级分布
        
      </div>
      <el-row :gutter="20">
        <el-col :span="16" :xs="24"
          ><barLine :echartDataSku="operationLevelNewCountYoyChart" />
        </el-col>
        <el-col :span="8" :xs="24">
          
          <el-table
            :data="operationLevelNewCountYoyList"
            style="width: 100%"
            border
            :height="350"
          >
            <el-table-column
              prop="operationLevel"
              label="层级"
              width="125"
            ></el-table-column>
            <el-table-column prop="newQuantity" label="2023年" width="150">
            </el-table-column>
            <el-table-column
              prop="yoyNewQuantity"
              label="2024年"
              width="150"
            ></el-table-column>
            <el-table-column
              prop="newQuantityYoy"
              label="同期比"
              width="100"
            ></el-table-column>
          </el-table>
        </el-col>
      </el-row>
    </el-card>

    <el-row :gutter="10">
      <el-col :span="12" :xs="24" v-for="(item, i) in xqpjTableData" :key="i">
        <el-card style="margin-bottom: 16px">
          <div slot="header">
            <span
              ><i class="el-icon-collection"></i>
              {{ item.cpbm }}上新品类层级分布</span
            >
          </div>
          <barLine :echartDataSku="item.name" />
        </el-card>
      </el-col>
    </el-row> -->
  </div>
</template>
<script>
import * as echarts from "echarts/lib/echarts.js";
import {
  selectSaleSynchronousItem,
  selectSaleSynchronousItemLastYear,
  selectProductSaleRatioTop,
  saleComprehensiveAnalysis,
  saleComprehensiveStatistics,
  selectSaleAmountRatio,
  saleComprehensiveStatisticsTransform,
} from "@/api/productStructure/BiCategoryBasicsDwd";
import LineChart from "./components/LineChart";
import barLine from "./components/barLine";
import PieChartI from "./components/PieChartI";
import barLineI from "./components/barLineI";
import tableList from "./components/table";
import tableDataIX from "./components/tableDataIX";
import tableDataX from "./components/tableDataX";

export default {
  props: {
    query: {
      type: Object,
      default: () => { },
    },
    dataYear: {
      type: Object,
      default: () => { },
    },
  },
  components: {
    barLine,
    PieChartI,
    barLineI,
    LineChart,
    tableList,
    tableDataIX,
    tableDataX,
  },
  data() {
    this.chartExtend = {
      series(v) {
        v.forEach((i) => {
          i.barWidth = 15;
          i.barGap = 0;
        });
        return v;
      },
      xAxis(v) {
        v.forEach((i) => {
          i.show = true;
          i.splitLine = { show: false };
          i.axisTick = { show: true };
          i.axisLine = { show: true };
        });
        return v;
      },
    };
    this.chartSettingscompleteRate = {
      // "0.[00]a",
      yAxisType: ["0.[00]", "0.[00]%"],
      showLine: ["支付转化率"],
      // yAxisName: ["访客数", "转化率"],
      axisSite: {
        right: ["支付转化率"],
      },
    };
    return {
      queryParamsI: {},
      //本年
      totalI: 0,
      pageReqI: {
        pageNum: 1,
        thisPageSize: 10,
      },
      //上一年
      queryParamsII: {},
      totalII: 0,
      pageReqII: {
        pageNum: 1,
        thisPageSize: 10,
      },
      IChart: {},
      IIChart: {},
      IIIChart: {},
      typeArr: [
        { value: "本年", label: "本年" },
        { value: "上一年", label: "上一年" },
        // { value: "近1年", label: "近1年" },
      ],
      yearLabel: "本年",
      PieChartData: {
        xData: [],
        female: [],
      },
      item: "",
      // TOP5TOP5TOP10TOP30TOP50TOP100TOP200TOP300
      topNumber: 10,
      topNumberList: [
        {
          value: 5,
          label: "TOP5",
        },
        {
          value: 10,
          label: "TOP10",
        },
        {
          value: 30,
          label: "TOP30",
        },
        {
          value: 50,
          label: "TOP50",
        },
        {
          value: 100,
          label: "TOP100",
        },
        {
          value: 200,
          label: "TOP200",
        },
        {
          value: 300,
          label: "TOP300",
        },
      ],
      tableDataI: [], // 用于存储转换后的数据
      tableDataII: [], // 用于存储转换后的数据
      months: [], // 用于存储所有月份

      operationLevelNewCountYoyChart: {},
      operationLevelNewCountYoyList: [],

      saleComprehensiveAnalysisChart: {},
      saleComprehensiveAnalysisList: [],
      //对比
      barLineChart: {},
      barLineData: [],

      xqpjTableData: [],
    };
  },
  watch: {
    query: {
      handler: function (newnew, oldold) {
        this.getselectSaleSynchronousItem();
        this.getselectSaleSynchronousItemLastYear();
        this.getsaleComprehensiveAnalysis();
        this.getselectSaleAmountRatio();

        // this.getselectProductSaleRatioTop();
      },
      deep: true,
      immediate: true,
    },
  },
  created() {
    // this.getList();
  },
  methods: {
    getsaleComprehensiveStatisticsTransform() {
      if (!this.item) {
        return;
      }
      saleComprehensiveStatisticsTransform({
        ...this.query,
        item: this.item,
      }).then((response) => {
        this.IIIChart = {
          columns: ["品类", "商品访客数", "支付转化率"],
          rows: [],
        };
        response.forEach((item) => {
          this.IIIChart.rows.push({
            品类: item.dataDateUnit,
            商品访客数: item.keywordProperty["商品访客数"],
            支付转化率: item.keywordProperty["支付转化率"] / 100,
          });
        });
        console.log(JSON.stringify(this.IIIChart.rows));
      });
    },
    getselectSaleAmountRatio() {
      // let response;
      // if (this.yearLabel == "本年") {
      //   response = this.tableDataI.slice(0, 10);
      // } else {
      //   response = this.tableDataII.slice(0, 10);
      // }

      selectSaleAmountRatio({
        ...this.query,
        yearLabel: this.yearLabel,
        topNumber: this.topNumber,
      }).then((response) => {
        let row = [];
        response.forEach((item) => {
          row.push({
            value: item.salesAmount,
            name: item.item,
          });
        });

        this.PieChartData.xData = response.map((item) => item.item);
        this.PieChartData.female = row;
        console.log(JSON.stringify(this.PieChartData));
      });
    },
    getsaleComprehensiveStatistics(item) {
      this.item = item;
      //访客 vs 转化
      this.getsaleComprehensiveStatisticsTransform();
      saleComprehensiveStatistics({ ...this.query, item: this.item }).then(
        (response) => {
          let result = [];

          response.forEach((item) => {
            Object.keys(item.keywordProperty).forEach((key) =>
              result.push(key)
            );
          });
          let column = Array.from(new Set(result));
          let columns = ["品类"].concat(column);
          console.log(JSON.stringify(columns));
          this.IChart = {
            columns: columns,
            rows: [],
          };
          this.IIChart = {
            columns: columns,
            rows: [],
          };
          response.forEach((item) => {
            if (
              item.dataDateUnit == "销售金额" ||
              item.dataDateUnit == "销售件数"
            ) {
              this.IChart.rows.push({
                品类: item.dataDateUnit,
                ...item.keywordProperty,
              });
            }
            if (
              item.dataDateUnit == "折扣率" ||
              item.dataDateUnit == "退货率"
            ) {
              this.IIChart.rows.push({
                品类: item.dataDateUnit,
                ...item.keywordProperty,
              });
            }
          });
        }
      );
    },
    getselectProductSaleRatioTop() {
      selectProductSaleRatioTop(this.query).then((response) => {
        this.barLineData = response;
        this.barLineChart = {
          columns: ["品类", "全品类销售额", "top10销售额", "同比"],
          rows: [],
        };

        response.forEach((item) => {
          this.barLineChart.rows.push({
            品类: item.year,
            全品类销售额: item.salesAmount,
            top10销售额: item.salesAmountTop,
            同比: item.salesAmountTopRatio ? item.salesAmountTopRatio : 0,
          });
        });
      });
    },
    changeView() {
      this.pageReqI.pageNum = 1;
      this.pageReqII.pageNum = 1;
      this.getselectSaleSynchronousItem();
      this.getselectSaleSynchronousItemLastYear();
    },
    // 打开加载层
    openLoading() {
      this.$modal.loading("正在加载，请稍候！");
    },
    getselectSaleSynchronousItem() {
      this.queryParamsI = {
        topNumber: this.topNumber,
        ...this.query,
        ...this.pageReqI,
      };
      this.openLoading();
      selectSaleSynchronousItem(this.queryParamsI).then((response) => {
        this.$modal.closeLoading();
        this.tableDataI = response.data;
        this.totalI = response.totalCount;
      });
    },
    getselectSaleSynchronousItemLastYear() {
      this.queryParamsII = {
        topNumber: this.topNumber,
        ...this.query,
        ...this.pageReqII,
      };
      selectSaleSynchronousItemLastYear(this.queryParamsII).then((response) => {
        this.tableDataII = response.data;
        this.totalII = response.totalCount;
      });
    },
    handleExportI() {
      this.download(
        "productStructure/BiCategoryBasicsDwd/selectSaleSynchronousItemExport",
        {
          ...this.queryParamsI,
        },
        `selectSaleSynchronousItemExport_${new Date().getTime()}.xlsx`
      );
    },
    handleExportII() {
      this.download(
        "productStructure/BiCategoryBasicsDwd/selectSaleSynchronousItemLastYearExport",
        {
          ...this.queryParamsII,
        },
        `selectSaleSynchronousItemLastYearExport_${new Date().getTime()}.xlsx`
      );
    },
    getproductNewCountYoy() {
      productNewCountYoy(this.query).then((response) => {
        this.barLineData = response.categorySaleTendData;

        this.barLineChart = {
          columns: ["品类", "上新数量", "上一年上新数量", "同比"],
          rows: [],
        };

        response.itemNewTimeYoyList.forEach((item) => {
          this.barLineChart.rows.push({
            品类: item.month,
            上新数量: item.newQuantity,
            上一年上新数量: item.yoyNewQuantity,
            同比: item.newQuantityYoy ? item.newQuantityYoy : 0,
          });
        });
      });
    },
    getsaleComprehensiveAnalysis() {
      saleComprehensiveAnalysis({
        topNumber: this.topNumber,
        ...this.query,
      }).then((response) => {
        this.saleComprehensiveAnalysisList = response;
        return;
        this.saleComprehensiveAnalysisChart = {
          columns: ["品类", "上新数量", "上一年上新数量", "同比"],
          rows: [],
        };

        response.itemNewTimeYoyList.forEach((item) => {
          this.saleComprehensiveAnalysisChart.rows.push({
            品类: item.category,
            上新数量: item.newQuantity,
            上一年上新数量: item.yoyNewQuantity,
            同比: item.newQuantityYoy ? item.newQuantityYoy : 0,
          });
        });
      });
    },
    getoperationLevelNewCountYoy() {
      operationLevelNewCountYoy(this.query).then((response) => {
        this.operationLevelNewCountYoyList = response;
        this.operationLevelNewCountYoyChart = {
          columns: ["品类", "上新数量", "上一年上新数量", "同比"],
          rows: [],
        };

        response.forEach((item) => {
          this.operationLevelNewCountYoyChart.rows.push({
            品类: item.operationLevel,
            上新数量: item.newQuantity,
            上一年上新数量: item.yoyNewQuantity,
            同比: item.newQuantityYoy ? item.newQuantityYoy : 0,
          });
        });
      });
    },
    getselectProTypeList(category) {
      operationLevelNewCountYoy({ category: category, ...this.query }).then(
        (response) => {
          let obj = {
            columns: ["品类", "上新数量", "上一年上新数量", "同比"],
            rows: [],
          };
          response.forEach((item) => {
            obj.rows.push({
              品类: item.operationLevel,
              上新数量: item.newQuantity,
              上一年上新数量: item.yoyNewQuantity,
              同比: item.newQuantityYoy ? item.newQuantityYoy : 0,
            });
          });
          this.xqpjTableData.forEach((item) => {
            if (item.cpbm == category) {
              item.name = obj;
            }
          });
        }
      );
    },
    getselectCategorySaleTend(property) {
      selectCategorySaleTend(this.query).then((response) => {
        this.tableData = []; // 用于存储转换后的数据
        this.months = []; // 用于存储所有月份
        // 提取所有月份
        response.categorySaleTendData.forEach((item) => {
          for (const month in item.keywordProperty) {
            // const element = array[index];
            if (!this.months.includes(month)) {
              this.months.push(month);
            }
          }
        });
        console.log(JSON.stringify(this.months));

        response.categorySaleTendData.forEach((item) => {
          const row = {
            dataDateUnit: item.dataDateUnit,
            salesData: [],
          };
          this.months.forEach((month) => {
            row.salesData.push(item.keywordProperty[month] || 0);
          });
          this.tableData.push(row);
        });

        // return;

        let order = { date: [], data: [] };
        order.date = response.categorySaleStatisticsTend.map(
          (item) => item.dataDateUnit
        );
        response.categorySaleStatisticsTend.forEach((item) => {
          order.data.push(item.keywordProperty);
        });
        const xData = order.date;

        console.log(JSON.stringify(order.data));
        const keyArray = Object.keys(order.data[1]);
        const series = [];
        keyArray.forEach((key) => {
          series.push({
            name: key,
            data: order.data.map((item) => item[key]),
            type: "line",
          });
        });

        const option = {
          grid: {
            left: "5%",
            top: "10%",
            right: "2%",
            bottom: "10%",
          },
          // 提示框
          tooltip: { trigger: "axis" },
          xAxis: {
            data: xData,
          },
          yAxis: {},
          legend: {
            data: keyArray,
          },
          series,
        };

        const E = echarts.init(this.$refs[property]);

        E.setOption(option);
      });
    },
  },
};
</script>
